<style lang="scss" scoped>

    .closeCot{
        position: absolute;
        top: 28px;
        right: 20px;
        height: 90px;
        width: 120px;
        text-align: center;
        >div{
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 56px;
            height: 40px;
            text-align: center;
            font-size: 24px;
            color: #fff;
        }

        >canvas{
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    }
    .imgClass{
        position: absolute;
        top: 20%;
        left: 35%;
        width: 237px;
        height: 319px;
    }
</style>

<template>
  <div style="width: 100%;height: 100%;position: fixed; top: 0;  z-index: 1111111; background-color:#25455d; ">
    <canvas id="canvas" width="400" height="800"></canvas>
    <!-- style="position: absolute; top: 13%; left: 0; width: 100%; " -->
    <img src="../../../assets/smartpic/smarteye.png" class="imgClass" alt="">
    <!-- <ul class="text-font">
           <li style="padding-bottom: 50px;">智</li>
           <li style="padding-bottom: 50px;">慧</li>
           <li>眼</li>
       </ul> -->
    <!-- <div class="text-container">
        <canvas id="textCanvas" width="45" height="45" ></canvas>
     </div> -->
    <!--退出按钮-->
    <div class="closeCot" @click.stop="closeCot">
      <canvas id="closeCanvas" width="45" height="45" ></canvas>
      <div>
        跳过
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  name: '',
  props: {

  },
  data() {
    return {
      img: require('../../../assets/smartpic/start-bg.jpg')
    }
  },
  computed: {
  },
  mounted() {
    const _this = this

    // 宇宙特效

    var canvas = document.getElementById('canvas'),
      ctx = canvas.getContext('2d'),
      ctx1 = canvas.getContext('2d'),
      ctxText = canvas.getContext('2d'),
      w = canvas.width = window.innerWidth,
      h = canvas.height = window.innerHeight,

      hue = 217,
      stars = [],
      count = 0,
      maxStars = 50// 星星数量

    var canvas2 = document.createElement('canvas'),
      ctx2 = canvas2.getContext('2d')
    canvas2.width = 100
    canvas2.height = 100
    var half = canvas2.width / 2,
      gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half)
    gradient2.addColorStop(0.025, '#CCC')
    gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)')
    gradient2.addColorStop(0.35, 'hsl(' + hue + ', 64%, 6%)')
    gradient2.addColorStop(1, 'transparent')

    ctx2.fillStyle = gradient2
    ctx2.beginPath()
    ctx2.arc(half, half, half, 0, Math.PI * 2)
    ctx2.fill()

    // End cache

    function random(min, max) {
      if (arguments.length < 2) {
        max = min
        min = 0
      }

      if (min > max) {
        var hold = max
        max = min
        min = hold
      }

      return Math.floor(Math.random() * (max - min + 1)) + min
    }

    function maxOrbit(x, y) {
      var max = Math.max(x, y),
        diameter = Math.round(Math.sqrt(max * max + max * max))
      return diameter / 2
      // 星星移动范围，值越大范围越小，
    }

    var Star = function() {
      this.orbitRadius = random(maxOrbit(w, h))
      this.radius = random(60, this.orbitRadius) / 10
      // 星星大小
      this.orbitX = w / 2
      this.orbitY = h / 2
      this.timePassed = random(0, maxStars)
      this.speed = random(this.orbitRadius) / 50000
      // 星星移动速度
      this.alpha = random(2, 10) / 10

      count++
      stars[count] = this
    }

    Star.prototype.draw = function() {
      var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
        y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
        twinkle = random(10)

      if (twinkle === 1 && this.alpha > 0) {
        this.alpha -= 0.05
      } else if (twinkle === 2 && this.alpha < 1) {
        this.alpha += 0.05
      }

      ctx.globalAlpha = 1
      ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius)
      this.timePassed += this.speed
    }

    for (var i = 0; i < maxStars; i++) {
      new Star()
    }

    function animation() {
      ctx.globalCompositeOperation = 'source-over'
      ctx.globalAlpha = 0.2 // 尾巴
      ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)'

      ctx.fillRect(0, 0, w, h)
      ctx.globalCompositeOperation = 'lighter'

      //  调色调成首页样式

      for (var i = 1, l = stars.length; i < l; i++) {
        stars[i].draw()
      }

      //    ctx.fillStyle = 'rgba(30,20,10,.3)';
      //    ctx.fillRect(0, 0, w, h)
      //    调色调成首页结束

      window.requestAnimationFrame(animation) // 动画
    }
    animation()
    // 文字绘图
    /**
             * 文字
             */
    // 设置线宽
    // var textCanvas = document.getElementById('textCanvas'),  //获取canvas元素
    //     textctx = textCanvas.getContext('2d'),  //获取画图环境，指明为2d
    //     centerX = textCanvas.width/2,   //Canvas中心点x轴坐标
    //     centerY = textCanvas.height/2;  //Canvas中心点y轴坐标
    // textctx.lineWidth = 1;
    // 设置线的颜色
    // textctx.strokeStyle = "dodgerblue";
    // textctx.moveTo(0,0);
    // textctx.strokeRect(0,0,600,600);

    // 绘制文字
    // 描边
    // ctxText.font="50px microsoft yahei";
    // ctxText.strokeText("智慧眼",20,100);
    //   关闭特效canvas
    var drawCricle = function() {
      var closeCanvas = document.getElementById('closeCanvas'), // 获取canvas元素
        context = closeCanvas.getContext('2d'), // 获取画图环境，指明为2d
        centerX = closeCanvas.width / 2, // Canvas中心点x轴坐标
        centerY = closeCanvas.height / 2, // Canvas中心点y轴坐标
        rad = Math.PI * 2 / 100, // 将360度分成100份，那么每一份就是rad度
        speed = 0.1 // 加载的快慢就靠它了

      // 绘制5像素宽的运动外圈
      function blueCircle(n) {
        context.save()
        context.strokeStyle = '#fff' // 设置描边样式
        context.lineWidth = 3 // 设置线宽
        context.beginPath() // 路径开始
        context.arc(centerX, centerY, 20, -Math.PI / 2, -Math.PI / 2 + n * rad, false) // 用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
        context.stroke() // 绘制
        context.closePath() // 路径结束
        context.restore()
      }
      // 绘制白色外圈
      function whiteCircle() {
        context.save()
        context.beginPath()
        context.lineWidth = 2 // 设置线宽
        context.strokeStyle = 'gray'
        context.arc(centerX, centerY, 20, 0, Math.PI * 2, false)
        context.stroke()
        context.closePath()
        context.restore()
      }
      // 百分比文字绘制
      function text(n) {
      }
      // 动画循环
      (function drawFrame() {
        window.requestAnimationFrame(drawFrame)
        context.clearRect(0, 0, closeCanvas.width, closeCanvas.height)
        whiteCircle()
        text(speed)
        blueCircle(speed)
        if (speed > 100) speed = 100
        speed += 0.4
      }())
    }

    drawCricle()

    setTimeout(function () {
      _this.closeCot()
    }, 5000)
  },
  methods: {
    closeCot() {
      this.$emit('closeStartPage')
    }

  }
}
</script>

<style lang="scss" scoped>
    .tableFixed{
        word-wrap: break-word;
        word-break: break-all;
        table-layout: fixed;
        white-space:nowrap;
    }
    table >thead,td:first-child{
        color :#ffffff;
    }
    .tdTwo{
        width: 70px;
        padding: 0 5px;
        white-space: initial;
   }
    td:nth-child(2) div{
        width: 100%;
        line-height: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .isLong{
        white-space: inherit!important;
    }
    .text-font{
        position: absolute;
        top: 30%;
        left: 0;
        width: 100%;
        text-align:center;
        font-size:64px;
        color: rgba(255, 255, 255, 0.8);
        letter-spacing: 0;
        text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135
    }
</style>
